<!--
 * @Author: lg
 * @Date: 2024-02-28 09:54:45
 * @LastEditors: 陈迪秀 1170776994@qq.com
 * @LastEditTime: 2024-03-04 10:56:10
 * @Description: 
 * @FilePath: \stell-mall\src\views\steel-home\components\card-list\index.vue
-->
<template>
  <!-- <el-scrollbar class="sh-scrollbar" height="calc(100vh -  500px)"> -->
  <div class="sh-scrollbar">
    <div
      v-for="(item, index) in cardList"
      :key="item"
      class="scrollbar-item"
      :class="{ active: active === index }"
      @click="handleItemClick(item)"
    >
      <div class="left">
        <img :src="item.url" alt="" style="object-fit:cover;"/>
      </div>
      <div class="right">
        <h3>
          {{ item.title }}
        </h3>
        <p class="right__p">
          {{ item.desc }}
        </p>
        <div class="right__footer">
          <div class="right__footer--time">{{ item.time }}</div>
          <el-button class="right__footer--more" text> 了解更多</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- </el-scrollbar> -->
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const props = defineProps({
  cardList: {
    type: Array,
    default: () => 5,
  },
});

const active = ref(0);
const router = useRouter();
const handleItemClick = (item: any) => {
  // active.value = index;
  router.push({
    path: "/steel-home-detail",
    query: {
      id: item.id,
    },
  });
};
</script>
<style scoped lang="scss">
.sh-scrollbar {
  /* padding-bottom: 15px; */
  background: #ffffff;
}
.scrollbar-item:first-child {
  border-top: 1px solid #dfe1e6;
}
.scrollbar-item {
  width: 940px;
  height: 208px;
  /* background: #f9f9f9; */
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid #dfe1e6;
  padding: 24px;
  display: flex;

  .left {
    width: 264px;
    height: 160px;
  }
  .right {
    flex: 1;
    margin-left: 24px;
    h3 {
      font-weight: 600;
      font-size: 20px;
      line-height: 32px;
      color: #1f2d41;
    }
    &__p {
      margin-top: 10px;
      font-size: 14px;
      line-height: 24px;
      color: #a5adba;
      // width: 604px;
      height: 48px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
  .right__footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    &--time {
      font-size: 14px;
      color: #a5adba;
      line-height: 18px;
    }
  }
}
.scrollbar-item:last-child {
  border-bottom: 0px solid #dfe1e6;
}
.scrollbar-item:hover {
  /* background: #fff; */
  border-bottom: none;
  /* border-bottom: 1px solid #dfe1e6; */
  box-shadow: 0px 6px 17px 4px rgba(209, 209, 209, 0.25);
  /* z-index: 1; */
  .right {
    h3,
    .right__footer--more {
      color: #1678ff;
    }
  }
}
</style>
